<template>
  <div class="home">
    <userText ref="usertext" @neoDraw="neoDraw"></userText>
    <TabMain
      @next="childNext"
      @back="childBack"
      @right="childRight"
      @error="childError"
    ></TabMain>
    <statusMain @changeUser="changeUser"></statusMain>
    <neovisTest
      style="position: absolute; left: 5%; top: 50%; transform: translateY(-50%)"
      :neovistest="neovistest"
      ref="neo"
    ></neovisTest>
  </div>
</template>

<script>
import TabMain from "@/components/tabbar/tabMain";
import userText from "@/views/userHome/userText";
import statusMain from "@/components/status-bar/statusMain";
import neovisTest from "@/views/userHome/neovisTest";
export default {
  name: "Home",
  components: {
    TabMain,
    userText,
    statusMain,
    neovisTest,
  },
  data() {
    return {
      neovistest: {
        articleId: 0,
        paragraphsId: 0,
        userId: 0,
      },
    };
  },
  methods: {
    //绘制关系图
    neoDraw() {
      this.neovistest.articleId = this.$refs.usertext.wordRelation.articleId;
      this.neovistest.paragraphsId = this.$refs.usertext.wordRelation.paragraphsId;
      this.neovistest.userId = this.$refs.usertext.wordRelation.userId;
      this.$refs.neo.draw();
    },
    childNext() {
      this.$refs.usertext.next();
    },
    childBack() {
      this.$refs.usertext.back();
    },
    childRight() {
      this.$refs.usertext.right();
    },
    childError() {
      this.$refs.usertext.error();
    },
    changeUser() {
      this.$refs.usertext.changeUser();
    },
  },
  mounted() {
    this.neovistest.articleId = this.$refs.usertext.wordRelation.articleId;
    this.neovistest.paragraphsId = this.$refs.usertext.wordRelation.paragraphsId;
    this.neovistest.userId = this.$refs.usertext.wordRelation.userId;
  },
};
</script>

<style>
@import "../assets/css/base.css";
</style>
